<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目验收报告</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }
        body {
            background-color: #f5f5f5;
            padding: 20px;
        }
        .container {
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
        }
        .btn-group {
            margin-bottom: 15px;
        }
        .btn {
            padding: 6px 12px;
            margin-right: 10px;
            border-radius: 4px;
            cursor: pointer;
            border: 1px solid #ddd;
            background-color: #fff;
            font-size: 14px;
            display: inline-flex;
            align-items: center;
        }
        .btn svg {
            width: 16px;
            height: 16px;
            margin-right: 5px;
            fill: #666;
        }
        .search-container {
            display: flex;
            margin-bottom: 20px;
            gap: 10px;
            align-items: center;
        }
        .search-item {
            display: flex;
            align-items: center;
        }
        .search-label {
            margin-right: 5px;
            font-size: 14px;
            color: #333;
        }
        .search-input {
            padding: 6px 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            width: 150px;
        }
        .search-btn {
            padding: 6px 15px;
            background-color: #2d8cf0;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: auto;
        }
        .search-btn svg {
            width: 16px;
            height: 16px;
            margin-right: 5px;
            fill: #fff;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 12px 15px;
            text-align: center;
            border-bottom: 1px solid #eee;
        }
        th {
            background-color: #f9f9f9;
            font-weight: bold;
            color: #333;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
        .checkbox {
            width: 18px;
            height: 18px;
        }
        .status-passed {
            color: #fff;
            background-color: #19be6b;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        .status-pending {
            color: #fff;
            background-color: #ff9900;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        .status-failed {
            color: #fff;
            background-color: #ed4014;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        .action-link {
            color: #2d8cf0;
            text-decoration: none;
        }
        .pagination {
            display: flex;
            justify-content: flex-end;
            margin-top: 20px;
            align-items: center;
        }
        .pagination span {
            margin: 0 5px;
            font-size: 14px;
            color: #666;
        }
        .page-btn {
            padding: 5px 10px;
            margin: 0 2px;
            border: 1px solid #ddd;
            background-color: #fff;
            cursor: pointer;
            border-radius: 3px;
            font-size: 12px;
        }
        .page-btn.active {
            background-color: #2d8cf0;
            color: #fff;
            border-color: #2d8cf0;
        }
        .btn-primary {
            background-color: #2d8cf0;
            color: #fff;
            border: none;
        }
        
        /* 弹窗样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        
        .modal-content {
            background-color: #fff;
            border-radius: 5px;
            width: 80%;
            max-width: 1000px;
            max-height: 90vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
        }
        
        .modal-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
        }
        
        .modal-close {
            cursor: pointer;
            font-size: 20px;
            color: #999;
        }
        
        .modal-body {
            padding: 20px;
            overflow-y: auto;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .modal-footer {
            padding: 12px 20px;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: flex-end;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #333;
        }
        
        .form-control {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        
        textarea.form-control {
            min-height: 100px;
            resize: vertical;
        }
        
        .form-help {
            font-size: 12px;
            color: #999;
            margin-top: 4px;
        }
        
        .btn-success {
            background-color: #19be6b;
            color: #fff;
            border: none;
        }
        
        .btn-danger {
            background-color: #ed4014;
            color: #fff;
            border: none;
        }
    </style>
</head>
<body>
    <!-- SVG图标库 -->
    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
        <symbol id="icon-add" viewBox="0 0 24 24">
            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"/>
        </symbol>
        <symbol id="icon-edit" viewBox="0 0 24 24">
            <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
        </symbol>
        <symbol id="icon-delete" viewBox="0 0 24 24">
            <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
        </symbol>
        <symbol id="icon-search" viewBox="0 0 24 24">
            <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
        </symbol>
        <symbol id="icon-close" viewBox="0 0 24 24">
            <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
        </symbol>
        <symbol id="icon-check" viewBox="0 0 24 24">
            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
        </symbol>
    </svg>

    <div class="container">
        <div class="btn-group">
            <button class="btn btn-primary" id="addReportBtn">
                <svg><use href="#icon-add"></use></svg>
                新增
            </button>
            <button class="btn">
                <svg><use href="#icon-edit"></use></svg>
                编辑
            </button>
            <button class="btn">
                <svg><use href="#icon-delete"></use></svg>
                删除
            </button>
        </div>

        <div class="search-container">
            <div class="search-item">
                <span class="search-label">项目名称：</span>
                <input type="text" class="search-input" placeholder="请输入名称">
            </div>
            <div class="search-item">
                <span class="search-label">状态：</span>
                <select class="search-input">
                    <option value="">全部</option>
                    <option value="passed">已通过</option>
                    <option value="pending">待验收</option>
                    <option value="failed">未通过</option>
                </select>
            </div>
            <div class="search-item">
                <span class="search-label">创建人：</span>
                <input type="text" class="search-input" placeholder="请输入创建人">
            </div>
            <button class="search-btn">
                <svg><use href="#icon-search"></use></svg>
                搜索
            </button>
        </div>

        <table>
            <thead>
                <tr>
                    <th style="width: 40px;"><input type="checkbox" class="checkbox"></th>
                    <th>NO.</th>
                    <th>项目名称</th>
                    <th>项目编号</th>
                    <th>项目负责人</th>
                    <th>终验日期</th>
                    <th>状态</th>
                    <th>验收类型</th>
                    <th>备注</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" class="checkbox"></td>
                    <td>1</td>
                    <td>信息化智能终端升级项目</td>
                    <td>YS2023001</td>
                    <td>张三</td>
                    <td>2023-08-15</td>
                    <td><span class="status-passed">已通过</span></td>
                    <td>终验</td>
                    <td>无</td>
                    <td>
                        <a href="#" class="action-link view-btn" data-id="1">查看</a>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="checkbox"></td>
                    <td>2</td>
                    <td>网络安全防护系统建设</td>
                    <td>YS2023002</td>
                    <td>李四</td>
                    <td>2023-09-20</td>
                    <td><span class="status-pending">待验收</span></td>
                    <td>初验</td>
                    <td>待完成验收测试</td>
                    <td>
                        <a href="#" class="action-link view-btn" data-id="2">查看</a>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="checkbox"></td>
                    <td>3</td>
                    <td>OA系统优化升级</td>
                    <td>YS2023003</td>
                    <td>王五</td>
                    <td>2023-10-12</td>
                    <td><span class="status-failed">未通过</span></td>
                    <td>终验</td>
                    <td>性能不达标</td>
                    <td>
                        <a href="#" class="action-link view-btn" data-id="3">查看</a>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="checkbox"></td>
                    <td>4</td>
                    <td>数据中心云迁移项目</td>
                    <td>YS2023004</td>
                    <td>赵六</td>
                    <td>2023-11-05</td>
                    <td><span class="status-passed">已通过</span></td>
                    <td>终验</td>
                    <td>无</td>
                    <td>
                        <a href="#" class="action-link view-btn" data-id="4">查看</a>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="checkbox"></td>
                    <td>5</td>
                    <td>智慧办公平台建设</td>
                    <td>YS2023005</td>
                    <td>钱七</td>
                    <td>2023-12-18</td>
                    <td><span class="status-pending">待验收</span></td>
                    <td>初验</td>
                    <td>等待用户测试</td>
                    <td>
                        <a href="#" class="action-link view-btn" data-id="5">查看</a>
                    </td>
                </tr>
            </tbody>
        </table>

        <div class="pagination">
            <span>共 120 条</span>
            <button class="page-btn">&lt;</button>
            <button class="page-btn active">1</button>
            <button class="page-btn">2</button>
            <button class="page-btn">3</button>
            <button class="page-btn">4</button>
            <button class="page-btn">5</button>
            <button class="page-btn">...</button>
            <button class="page-btn">&gt;</button>
        </div>
    </div>

    <!-- 验收报告查看弹窗 -->
    <div class="modal" id="reportModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="modalTitle">项目验收报告</h3>
                <span class="modal-close">&times;</span>
            </div>
            <div class="modal-body">
                <form id="reportForm">
                    <div class="form-group">
                        <label class="form-label">项目名称</label>
                        <input type="text" class="form-control" id="projectName" disabled>
                    </div>
                    <div class="form-group">
                        <label class="form-label">项目编号</label>
                        <input type="text" class="form-control" id="projectCode" disabled>
                    </div>
                    <div class="form-group">
                        <label class="form-label">项目负责人</label>
                        <input type="text" class="form-control" id="projectManager" disabled>
                    </div>
                    <div class="form-group">
                        <label class="form-label">验收日期</label>
                        <input type="date" class="form-control" id="reportDate" disabled>
                    </div>
                    <div class="form-group">
                        <label class="form-label">验收状态</label>
                        <input type="text" class="form-control" id="reportStatus" disabled>
                    </div>
                    <div class="form-group">
                        <label class="form-label">验收类型</label>
                        <input type="text" class="form-control" id="acceptanceType" disabled>
                    </div>
                    <div class="form-group">
                        <label class="form-label">验收内容</label>
                        <textarea class="form-control" id="reportContent" disabled></textarea>
                    </div>
                    <div class="form-group">
                        <label class="form-label">存在问题</label>
                        <textarea class="form-control" id="reportIssues" disabled></textarea>
                    </div>
                    <div class="form-group">
                        <label class="form-label">备注</label>
                        <textarea class="form-control" id="reportRemarks" disabled></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn" id="closeBtn">关闭</button>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 模态框元素
            const modal = document.getElementById('reportModal');
            const modalClose = document.querySelector('.modal-close');
            const closeBtn = document.getElementById('closeBtn');
            const addReportBtn = document.getElementById('addReportBtn');
            const modalTitle = document.getElementById('modalTitle');
            const form = document.getElementById('reportForm');
            
            // 查看按钮
            const viewBtns = document.querySelectorAll('.view-btn');
            
            // 点击查看按钮
            viewBtns.forEach(function(btn) {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    const reportId = this.getAttribute('data-id');
                    modalTitle.textContent = '查看验收报告';
                    loadReportData(reportId);
                    modal.style.display = 'flex';
                });
            });
            
            // 关闭模态框
            modalClose.addEventListener('click', function() {
                modal.style.display = 'none';
            });
            
            closeBtn.addEventListener('click', function() {
                modal.style.display = 'none';
            });
            
            // 点击模态框外部关闭
            window.addEventListener('click', function(e) {
                if (e.target === modal) {
                    modal.style.display = 'none';
                }
            });
            
            // 加载报告数据
            function loadReportData(reportId) {
                // 模拟从服务器获取数据
                // 在实际应用中，这里应该发送AJAX请求获取数据
                const reportData = {
                    1: {
                        projectName: '信息化智能终端升级项目',
                        projectCode: 'YS2023001',
                        projectManager: '张三',
                        reportDate: '2023-08-15',
                        reportStatus: '已通过',
                        acceptanceType: '终验',
                        reportContent: '1. 验收了信息化智能终端的硬件配置\n2. 验收了智能终端的软件功能\n3. 验收了终端与后台系统的数据交互功能\n4. 验收了系统运行稳定性',
                        reportIssues: '1. 部分终端设备响应速度略慢\n2. 用户界面还有优化空间',
                        reportRemarks: '无'
                    },
                    2: {
                        projectName: '网络安全防护系统建设',
                        projectCode: 'YS2023002',
                        projectManager: '李四',
                        reportDate: '2023-09-20',
                        reportStatus: '待验收',
                        acceptanceType: '初验',
                        reportContent: '待验收',
                        reportIssues: '',
                        reportRemarks: '待完成验收测试'
                    },
                    3: {
                        projectName: 'OA系统优化升级',
                        projectCode: 'YS2023003',
                        projectManager: '王五',
                        reportDate: '2023-10-12',
                        reportStatus: '未通过',
                        acceptanceType: '终验',
                        reportContent: '1. 验收了OA系统的基础功能\n2. 验收了系统性能优化效果\n3. 验收了用户权限管理功能',
                        reportIssues: '1. 系统在高并发情况下仍存在卡顿\n2. 部分功能模块不稳定\n3. 权限设置存在逻辑错误',
                        reportRemarks: '性能不达标'
                    },
                    4: {
                        projectName: '数据中心云迁移项目',
                        projectCode: 'YS2023004',
                        projectManager: '赵六',
                        reportDate: '2023-11-05',
                        reportStatus: '已通过',
                        acceptanceType: '终验',
                        reportContent: '1. 验收了数据迁移的完整性\n2. 验收了云环境的性能指标\n3. 验收了系统访问速度\n4. 验收了数据安全性',
                        reportIssues: '暂无明显问题',
                        reportRemarks: '无'
                    },
                    5: {
                        projectName: '智慧办公平台建设',
                        projectCode: 'YS2023005',
                        projectManager: '钱七',
                        reportDate: '2023-12-18',
                        reportStatus: '待验收',
                        acceptanceType: '初验',
                        reportContent: '待验收',
                        reportIssues: '',
                        reportRemarks: '等待用户测试'
                    }
                };
                
                const data = reportData[reportId];
                if (data) {
                    document.getElementById('projectName').value = data.projectName;
                    document.getElementById('projectCode').value = data.projectCode;
                    document.getElementById('projectManager').value = data.projectManager;
                    document.getElementById('reportDate').value = data.reportDate;
                    document.getElementById('reportStatus').value = data.reportStatus;
                    document.getElementById('acceptanceType').value = data.acceptanceType;
                    document.getElementById('reportContent').value = data.reportContent;
                    document.getElementById('reportIssues').value = data.reportIssues;
                    document.getElementById('reportRemarks').value = data.reportRemarks;
                }
            }
            
            // 添加新增报告功能
            addReportBtn.addEventListener('click', function() {
                window.location.href = 'pigeonhole/expert-acceptance.html';
            });
        });
    </script>
</body>
</html>
